<template>
  <view class="hospital-info-container">
    <!-- 医院信息部分 -->
    <view class="hospital-info">
      <text class="hospital-name">{{ hospitalInfo.hospitalName }}</text>
      <view class="hospital-picture" v-if="hospitalInfo.hospitalPicture">
        <image :src="hospitalInfo.hospitalPicture" mode="aspectFill" class="custom-image"></image>
      </view>
      <view class="hospital-header">
        <view class="hospital-address">
          <text>简介：{{ getTruncatedIntroduction(hospitalInfo.hospitalIntroduction) }}</text>
        </view>
        <view class="rank-container">
            <text class="hospital-address">
              <span v-if="hospitalInfo.hospitalLevel === 0">三级甲等</span>
              <span v-else-if="hospitalInfo.hospitalLevel === 1">二级甲等</span>
              <span v-else-if="hospitalInfo.hospitalLevel === 2">一级甲等</span>
              <span v-else>未知等级</span>
            </text>
            <text class="hospital-address" style="margin-left: 20px;">{{hospitalInfo.nationalRank}}</text>
          </view>
      </view>
    </view>
    <!-- 科室部分 -->
    <view class="department-container">
      <view class="cascade-picker">
        <view class="department-columns">
          <div class="left-column">
            <div v-for="(department, index) in departments" :key="department.departmentsId" class="picker-item" @click="toggleChildren(department)">
              {{ department.departmentsName }}
            </div>
          </div>
          <div class="right-column" v-if="selectedDepartment && selectedDepartment.childrenList && selectedDepartment.childrenList.length > 0">
            <div v-for="(child, childIndex) in selectedDepartment.childrenList" :key="child.departmentsId" class="picker-item child-item">
              {{ child.departmentsName }}
            </div>
          </div>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findHospitalSelectDepartment, getById } from "@/api/hospital/hospital";

export default {
  data() {
    return {
      departments: [],
      selectedDepartment: null,
      hospitalInfo: {},
      hospitalInfo: {
        hospitalIntroduction: ""
      }
    };
  },
  onLoad(options) {
    this.hospitalId = options.hospitalId;
    this.getList();
    this.getHospitalInfo();
  },
  methods: {
    getTruncatedIntroduction(introduction) {
      if (introduction.length > 50) {
        return introduction.slice(0, 50) + "...";
      } else {
        return introduction;
      }
    },
    getHospitalInfo() {
      // 假设您有一个 API 来获取医院信息
      getById(this.hospitalId).then(res => {
        if (res.code === 200) {
          this.hospitalInfo = res.data;
        } else {
          console.error('Failed to fetch hospital info:', res.msg);
        }
      }).catch((error) => {
        console.error('Error fetching hospital info:', error);
      });
    },
    getList() {
      findHospitalSelectDepartment(this.hospitalId).then(res => {
        if (res.code === 200) {
          this.departments = res.data;
        } else {
          console.error('Failed to fetch department data:', res.msg);
        }
      }).catch((error) => {
        console.error('Error fetching department data:', error);
      });
    },
    toggleChildren(department) {
      this.selectedDepartment = department;
    }
  }
};
</script>

<style scoped>
.hospital-address {
  font-size: 16px;
  line-height: 1.5;
}
.hospital-info-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    background-color: #f8f8f8;
    /* 添加背景图 */
    background-image: url('@/static/bjt.jpg'); /* 从 public 目录下获取图片 */
    background-size: cover; /* 使背景图覆盖整个容器 */
    background-repeat: no-repeat; /* 不重复平铺背景图 */
    background-position: center center; /* 背景图居中显示 */
  }

.hospital-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px; /* 给医院信息部分底部添加间距 */
  }

.hospital-name {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
  }

.hospital-picture {
    width: 500px;
    height: 200px;
    object-fit: cover;
  }

.hospital-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }

.hospital-address {
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
  }

.rank-container {
    display: flex;
    align-items: center;
    background-color: #e6f7ff;
    padding: 5px 10px;
    margin-bottom: 10px;
  }

.custom-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* 科室部分的样式 */
.department-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px; /* 给科室部分顶部添加间距 */
    background-color: #f8f8f8;
  }

.cascade-picker {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    background-color: #f8f8f8;
  }

.department-columns {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

.left-column,
.right-column {
    width: 50%;
    overflow-y: auto;
  }

.picker-item,
.child-item {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
  }

.child-item {
    border-left: 2px solid #ccc;
    padding-left: 15px;
  }
</style>